<template>
  <div>
    <el-table
      :data="commentsData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" fixed />
      <el-table-column label="头像" width="100" align="center">
        <template #default="scope">
          <el-avatar :size="50" :src="scope.row.user.avatar" />
        </template>
      </el-table-column>

      <el-table-column
        prop="user.username"
        label="用户名"
        show-overflow-tooltip
        align="center"
        width="100"
      />

      <el-table-column
        prop="articleTitle"
        label="图书标题"
        show-overflow-tooltip
        align="center"
        min-width="100"
      />

      <el-table-column
        prop="content"
        label="评论内容"
        show-overflow-tooltip
        align="center"
        min-width="100"
      />

      <el-table-column
        prop="address"
        label="用户地址"
        show-overflow-tooltip
        align="center"
        min-width="100"
      />

      <el-table-column
        label="是否被举报"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
        <template #default="scope">
          <span>{{ scope.row.report == '2' ? '被举报' : '正常' }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center" width="160">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon>
              <Timer />
            </el-icon>
            <span style="margin-left: 10px">{{
              dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm')
            }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="parentId"
        label="挂载的id"
        show-overflow-tooltip
        align="center"
      />

      <el-table-column label="操作" width="100" align="center" fixed="right">
        <template #default="scope">
          <el-popconfirm
            title="确定删除吗?"
            @confirm="handleDelClick(scope.$index, scope.row)"
          >
            <template #reference>
              <el-button
                size="small"
                circle
                :icon="Delete"
                type="danger"
              ></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, inject, defineExpose } from 'vue'
import dayjs from 'dayjs'
import { Timer, Delete } from '@element-plus/icons-vue'

// 导入全局状态
const store: any = inject('store')

type commentsData = {
  address?: string
  articleTitle?: string
  content?: string
  createTime?: string
  parentId?: string
  report?: string
  _id?: string
  user?: {
    avatar?: string
    username?: string
  }
}
defineProps<{
  commentsData: commentsData[]
}>()
//  这个是选择中的数据
const multipleSelection = ref<commentsData[]>([])
// 每选择一次机会给 multipleSelection数组 加一个数据
const handleSelectionChange = (val: commentsData[]) => {
  multipleSelection.value = val
}
// 删除当前的
const emits = defineEmits(['deleteId'])
const handleDelClick = (index: number, row: commentsData) => {
  // deleteComment()
  emits('deleteId', [row._id])
}

defineExpose({ multipleSelection })
</script>

<style lang="scss" scoped></style>
